<template>
  <view class="diagnosis-edit">
    <view class="title">填写信息</view>
    <view class="report-list">
      <vew class="report-item rbox">
        <text class="name">回复类型</text>
        <view class="select-list rbox">
          <block v-for="(item, idx) in list" :key="idx">
            <view
              :class="['select-item', 'rbox', { active: activeIndex == idx }]"
              @tap="changeState(idx)"
              >{{ item }}</view
            >
          </block>
        </view>
      </vew>
    </view>

    <view class="report-result cbox">
      <text class="name">诊断结果</text>
      <textarea class="info" placeholder="请输入您的诊断结果" />
    </view>

    <view class="line rbox box_space_b box_y_center">
      <text class="name">发布类型</text>
      <picker
        mode="selector"
        :range="array"
        :value="arrIdx"
        class="picker-wrap"
        @change="listenerPickerSelected"
      >
        <text>{{ array[arrIdx] }}</text>
      </picker>
    </view>

    <view
      class="single-btn btn-normal rbox box_center btn-position"
      @tap="goPage('diagnosisConfirm')"
    >
      诊断回复
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      list: [
        '初步诊断', '建议送检'
      ],
      array: ['点击选择', '类型一', '类型二', '类型三', '类型四'],
      arrIdx: 0,
    }
  },
  methods: {
    goPage(url) {
      if (url) {
        wx.navigateTo({
          url: `/pages/${url}/${url}`
        })
      }
    },
    listenerPickerSelected: function (e) {
      this.arrIdx = e.detail.value
    },
    changeState(idx) {
      this.activeIndex = idx
    }
  }
}
</script>

<style lang="scss" scoped>
.diagnosis-edit {
  padding: 40rpx 42rpx 0;
  min-height: 100vh;
  background-color: #fff;
  .title {
    font-size: 40rpx;
    line-height: 1;
  }
  .name {
    font-size: 32rpx;
    line-height: 1;
  }
  .report-list {
    margin-top: 40rpx;
    .report-item {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f7f7f7;
      .select-list {
        margin-left: 35rpx;
      }
      .select-item {
        &:not(:first-child) {
          margin-left: 30rpx;
        }
        position: relative;
        font-size: 32rpx;
        line-height: 1;
        color: #b7b7b7;
        &::before {
          margin-right: 15rpx;
          content: "";
          display: flex;
          width: 34rpx;
          height: 34rpx;
          border-radius: 50%;
          background-color: #fff;
          border: 1rpx solid #d2cccc;
        }
        &.active {
          &::after {
            position: absolute;
            top: 50%;
            left: 18rpx;
            transform: translate(-50%, -50%);
            content: "";
            width: 22rpx;
            height: 22rpx;
            border-radius: 50%;
            background-color: #d2cccc;
          }
        }
      }
    }
  }
  .report-result {
    margin-top: 20rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f7f7f7;
    .info {
      padding: 30rpx;
      margin-top: 20rpx;
      min-height: 260rpx;
      background: #ffffff;
      border: 1px solid #e9e9e9;
      box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 30rpx;
    }
  }

  .line {
    margin-top: 20rpx;
    .name {
      color: #646566;
    }
    .info-wrap,
    .picker-wrap {
      color: #646566;
      width: 70%;
      text-align: center;

      height: 64rpx;
      line-height: 64rpx;
      background: #ffffff;
      box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 24rpx;
    }
  }
}
</style>